<template>
  <view class="container">
    <view class="container-body" v-if="isActivityFlag">
      <view v-for="(item, index) in questionnaireData.singleList" :key="item.answerId">
        <view class="flex info">
          <view class="type">单选</view>
          <view>{{ index + 1 }}、{{ item.questionsContent }}</view>
        </view>
        <view
          v-for="(optionItem, optionIndex) in item.questionsAnswerResps"
          :key="optionIndex"
          class="option"
          :class="{ active: isSelect(optionItem) }"
          @click="handleSingleSelect(item, optionItem, index)"
        >
          <text>{{ optionItem.answerContent }}</text>
          <image v-if="isSelect(optionItem)" src="/static/images/online-examination/select.png" />
        </view>
      </view>
      <view v-for="(item, index) in questionnaireData.multipleList" :key="item.answerId">
        <view class="flex info">
          <view class="type">多选</view>
          <view>{{ questionnaireData.singleList.length + index + 1 }}、{{ item.questionsContent }}</view>
        </view>
        <view
          v-for="(optionItem, optionIndex) in item.questionsAnswerResps"
          :key="optionIndex"
          class="option"
          :class="{ active: isSelect(optionItem) }"
          @click="handleMultipleSelect(item, optionItem, index)"
        >
          <text>{{ optionItem.answerContent }}</text>
          <image v-if="isSelect(optionItem)" src="/static/images/online-examination/select.png" />
        </view>
      </view>
      <view v-for="(item, index) in questionnaireData.answerList" :key="index">
        <view class="flex info">
          <view class="type">问答</view>
          <view
            >{{ questionnaireData.singleList.length + questionnaireData.multipleList.length + index + 1 }}、{{
              item.questionsContent
            }}</view
          >
        </view>
        <uni-easyinput
          type="textarea"
          v-model="item.answerContent"
          placeholder="请输入"
          maxlength="200"
          style="margin-bottom: 20rpx"
        />
      </view>
    </view>
    <view class="btn-box" v-if="isActivityFlag">
      <view @click="handleSubmit">提交</view>
    </view>
    <Empty
      v-else
      :tip-content="
        questionnaireData.status === 'FINISHED' ? '活动已结束，感谢您的关注！' : '活动暂未开始，感谢您的关注！'
      "
    />
  </view>
</template>

<script>
import Empty from '@/components/cu-empty/index.vue'
import { getQuestionnaireDetail, fillQuestionnaire } from '@/api/educational-training/training-research'
import { readMessage } from '@/api/message'

export default {
  components: {
    Empty
  },
  data() {
    return {
      questionnaireId: '',
      noticeId: '',
      questionnaireData: {},
      fillData: [],
      isSubmit: false,
      isActivityFlag: false
    }
  },
  onLoad({ questionnaireId, noticeId }) {
    this.questionnaireId = questionnaireId
    this.noticeId = noticeId
    this.getQuestionnaireData()
  },
  methods: {
    async getQuestionnaireData() {
      const { data } = await getQuestionnaireDetail(this.questionnaireId)
      this.questionnaireData = data
      this.isActivityFlag = data.status === 'PUBLISH'
      if (this.questionnaireData.answerList.length) {
        this.questionnaireData.answerList.forEach((item) => {
          this.$set(item, 'answerContent', '')
        })
      }
    },
    isSelect({ answerId }) {
      let answerIds = []
      this.fillData.forEach((item) => {
        answerIds.push(...(item.choseOptionIdList || []))
      })
      return answerIds.includes(answerId)
    },
    // 单选
    handleSingleSelect({ questionsId }, { answerId }, index) {
      const questionIndex = this.fillData.findIndex((qItem) => qItem.questionsId === questionsId)
      if (questionIndex > -1) {
        this.fillData[questionIndex].choseOptionIdList = [answerId]
      } else {
        this.fillData.push({
          personId: this.$store.state.user.staffId,
          questionnaireId: this.questionnaireId,
          questionsId,
          choseOptionIdList: [answerId]
        })
      }
      this.questionnaireData.singleList[index].answerContent = [answerId]
    },
    // 多选
    handleMultipleSelect({ questionsId }, { answerId }, index) {
      const questionIndex = this.fillData.findIndex((qItem) => qItem.questionsId === questionsId)
      if (questionIndex > -1) {
        const optionIndex = this.fillData[questionIndex].choseOptionIdList.findIndex((oItem) => oItem === answerId)
        if (optionIndex > -1) {
          this.fillData[questionIndex].choseOptionIdList.splice(optionIndex, 1)
          this.fillData[questionIndex].choseOptionIdList.length === 0 && this.fillData.splice(questionIndex, 1)
        } else {
          this.fillData[questionIndex].choseOptionIdList.push(answerId)
        }
      } else {
        this.fillData.push({
          personId: this.$store.state.user.staffId,
          questionnaireId: this.questionnaireId,
          questionsId,
          choseOptionIdList: [answerId]
        })
      }
      this.questionnaireData.multipleList[index].answerContent =
        questionIndex > -1 ? this.fillData[questionIndex]?.choseOptionIdList || [] : [answerId]
    },
    handleSubmit() {
      const { singleList, multipleList, answerList } = this.questionnaireData
      answerList.forEach((item) => {
        item.answerContent &&
          this.fillData.push({
            personId: this.$store.state.user.staffId,
            questionnaireId: this.questionnaireId,
            questionsId: item.questionsId,
            answerContent: item.answerContent
          })
      })
      if (singleList.some((item) => item.isWillAnswer === '1' && (!item.answerContent || !item.answerContent.length))) {
        uni.showToast({
          title: '请完成必答题',
          icon: 'none'
        })
        return
      }
      if (
        multipleList.some((item) => item.isWillAnswer === '1' && (!item.answerContent || !item.answerContent.length))
      ) {
        uni.showToast({
          title: '请完成必答题',
          icon: 'none'
        })
        return
      }
      if (answerList.some((item) => item.isWillAnswer === '1' && (!item.answerContent || !item.answerContent.length))) {
        uni.showToast({
          title: '请完成必答题',
          icon: 'none'
        })
        return
      }
      if (this.isSubmit) {
        return
      }
      this.isSubmit = true
      fillQuestionnaire(this.fillData)
        .then(async () => {
          // await readMessage(this.noticeId)
          uni.navigateBack()
        })
        .finally(() => {
          this.isSubmit = false
        })
    }
  }
}
</script>

<style scoped lang="scss" type="text/scss">
.container {
  background-color: #f5f5f8;
  height: 100%;
  overflow-y: auto;
  padding: 20rpx 30rpx 180rpx 30rpx;
  &-body {
    padding: 20rpx;
    background: #fff;
    .info {
      word-break: break-all;
    }
    .type {
      width: 100rpx;
      height: 50rpx;
      line-height: 50rpx;
      background: #2ac0c8;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      color: #fff;
      font-size: 12px;
      text-align: center;
      margin-bottom: 20rpx;
      margin-right: 10rpx;
    }
    .option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30rpx 30rpx 30rpx 20rpx;
      width: 100%;
      background: #f5f5f5;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      margin-bottom: 20rpx;
      font-size: 30rpx;
      & text {
        display: inline-block;
        min-height: 48rpx;
        line-height: 48rpx;
      }
      &.active {
        background: #ebf2f5;
      }
      image {
        width: 48rpx;
        height: 48rpx;
        flex-shrink: 0;
      }
    }
  }
  .btn-box {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    display: flex;
    justify-content: center;
    padding: 30rpx 0;
    > view {
      width: 80%;
      border-radius: 44rpx 44rpx 44rpx 44rpx;
      font-size: 34rpx;
      text-align: center;
      height: 88rpx;
      line-height: 88rpx;
      background: #2ac0c8;
      color: #fff;
    }
  }
}
</style>
